<template>
    <div>
        <div>
            <el-card>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="queryUser.userName" placeholder="用户名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="queryUser.roleName" placeholder="用户角色"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" size="mini" type="primary" @click="selectData">查询</el-button>
                        <el-button @click="tianjia" size="mini"  icon="el-icon-plus"    type="success">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="box-card" style="margin-top: 10px">
                <div>
                    <el-table
                            :data="
                tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
               "
                            border
                            style="width: 100%">
                        <el-table-column
                                fixed
                                prop="userCode"
                                label="成员账号">
                        </el-table-column>

                        <el-table-column
                                prop="userName"
                                label="姓名">
                        </el-table-column>
                        <el-table-column
                                prop="email"
                                label="邮箱地址">
                        </el-table-column>
                        <el-table-column
                                prop="roleName"
                                label="所属角色">
                            <template slot-scope="scope">
                                <span v-if="scope.row.roleId ==1">admin</span>
                                <span v-if="scope.row.roleId ==2">村级业务员</span>
                                <span v-if="scope.row.roleId ==3">农业农村部门</span>
                                <span v-if="scope.row.roleId ==4">自然资源部</span>
                                <span v-if="scope.row.roleId ==5">村民小组</span>
                                <span v-if="scope.row.roleId ==6">村级组织</span>
                                <span v-if="scope.row.roleId ==7">乡镇政府</span>
                                <span v-if="scope.row.roleId ==8">用户</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="添加时间">
                        </el-table-column>
                        <el-table-column
                                prop="enable"
                                label="是否启用">
                            <template slot-scope="scope">
                                <span v-if="scope.row.enable ==1">启用</span>
                                <span v-if="scope.row.enable ==2">未启用</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220px" v-slot=scope>
                            <el-button
                                    type="primary"
                                    size="mini"
                                    icon="el-icon-edit"
                                    @click="updateById(scope.row)">修改</el-button>
                            <el-button
                                    type="danger"
                                    size="mini"
                                    icon="el-icon-delete"
                                    @click="delUser(scope.row)">删除</el-button>
                        </el-table-column>
                    </el-table>

                    <el-dialog title="修改" :visible.sync="updateOpen">
                        <el-form
                                :inline="true"
                                :model="update"
                                :label-position="labelPosition"
                                label-width="120px">
                            <el-form-item label="用户昵称">
                                <el-input  v-model="update.userName"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <el-input  v-model="update.email"></el-input>
                            </el-form-item>
                            <!--图片循环!-->
                            <el-form-item label="用户头像">
                                <el-upload
                                        class="avatar-uploader"
                                        action="http://localhost:8082/upload"
                                        field="file"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :key="imagecropperKey"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="update.pton" :src="update.pton" v-model="update.pton" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="用户角色" prop="xFrom.rid">
                                <el-select v-model="update.roleId" placeholder="请选择">
                                    <el-option
                                            v-for="item in option"
                                            :key="item.roleId"
                                            :label="item.roleName"
                                            :value="item.roleId"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否启用">
                                <el-select v-model="update.enable" >
                                    <el-option label="启用" value="1"></el-option>
                                    <el-option label="未启用" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="tijiao2">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>

                <el-dialog title="添加用户" :visible.sync="addOpen">
                    <el-form
                            :inline="true"
                            :model="add"
                            :label-position="labelPosition"
                            label-width="120px"
                    >
                        <el-form-item label="姓名">
                            <el-input v-model="add.userName"></el-input>
                        </el-form-item>

                        <el-form-item label="用户名">
                            <el-input v-model="add.userCode"></el-input>
                        </el-form-item>

                        <el-form-item label="密码">
                            <el-input type="password" v-model="add.passWord"></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱">
                            <el-input type="email" v-model="add.email"></el-input>
                        </el-form-item>
                        <el-form-item label="头像">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8082/upload"
                                field="file"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="this.pton" :src="this.pton" v-model="add.pton" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        </el-form-item>
                        <el-form-item label="用户角色" prop="xFrom.rid">
                            <el-select v-model="add.roleId" placeholder="请选择">
                                <el-option
                                        v-for="item in option"
                                        :key="item.roleId"
                                        :label="item.roleName"
                                        :value="item.roleId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="tijiao1">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!--分页-->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[2, 3, 4, 5, tableData.length]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.length"
                >
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 2,
                addOpen: false,
                imagecropperKey:0,
                option: [],
                formLabelWidth: "80",
                tableData: [],
                updateOpen: false,
                update: {
                    pkId:"",
                    username: "",
                    roleId: "",
                    email:"",
                    pton:"",
                    enable:""
                },
                add: {
                    username: "",
                    password: "",
                    roleId: "",
                    userCode:"",
                    email:"",
                    pton:"",
                },
                roleName:'',
                queryUser:{},
                pton:''
            };
        },
        created() {
            this.selectData();
            this.findqx();
        },
        methods: {
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
            },
            handleAvatarSuccess(res, file) {
                this.pton = res.data.url
                this.add.pton =res.data.url
                this.update.pton =res.data.url
                this.imagecropperKey =this.imagecropperKey+1
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isBMP = file.type === 'image/bmp';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isGIF && !isPNG && !isBMP) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
            },
            tijiao1() {
                this.$confirm('是否添加此用户?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'}).then(() => {
                    this.postRequest("/house/user/addUser", this.add).then((res) => {
                        if (res.code == 20000) {
                            this.$message({
                                message: "添加成功",
                                type: "success",
                            });
                        }
                        this.addOpen = false
                        this.selectData()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加',
                    });
                    this.addOpen = false
                    this.selectData()
                    this.add={}
                });

            },
            tijiao2() {
                this.$confirm('是否修改此用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'}).then(() => {
                    console.log("+--++----+--++-+-+-"+this.update.pton)
                    this.putRequest("/house/user/update", this.update).then((res) => {
                        console.log( this.update.pton)
                        if (res.code == 20000) {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                            });
                        }
                        this.updateOpen = false
                        this.selectData()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消添加',
                    });
                    this.updateOpen = false
                    this.selectData()
                });

            },
            tianjia() {
                this.addOpen = true;
                this.getRequest('/house/user/findRole')
                    .then(resp => {
                        this.option= resp.data.role
                    })
            },
            updateById(row) {
                this.updateOpen = true;
                this.update = { ...row };
                this.getRequest('/house/user/findRole')
                    .then(resp => {
                        this.option= resp.data.role
                    })
                this.getRequest("/house/user/findById/"+row.pkId)
                    .then((res) => {
                        this.update = res.data.list;
                    });
            },
            //删除
            delUser(row){
                this.$confirm('是否删除此用户?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'}).then(() => {
                    this.deleteRequest("/house/user/del/"+row.pkId).then((res) => {
                        if (res.code == 20000) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                        }
                        this.selectData()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                    this.selectData()
                });
            },
            //全查模糊查
            selectData() {
                this.postRequest('/house/user/findAll', this.queryUser)
                    .then(resp => {
                        console.log(this.queryUser)
                        this.tableData=resp.data.list
                    })
            },
        },
    };
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-left: 30px ;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 110px;
        height: 110px;
        line-height: 110px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>